<template>
    <div class="tab-item" @click="handleClick" :class="{ active: isActive }">
        <i class="iconfont" :class="`icon-${icon}`"></i>
        <slot></slot>
    </div>
</template>
<script setup>
import { getCurrentInstance, defineProps, inject, computed } from "vue";
const props = defineProps({
    icon: {
        type: String,
        default: "",
    },
});

// 获取当前实例
const instance = getCurrentInstance();
const parent = inject("TabBar");
parent.link(instance);
const index = computed(() => {
    return parent.children.indexOf(instance);
});
const isActive = computed(() => parent.props.modelValue === index.value);

const handleClick = () => {
    parent.setActive(index.value);
};
</script>
<style scoped>
@import "http://at.alicdn.com/t/c/font_4851838_titgta22b5.css";

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    cursor: pointer;
}
.tab-item i {
    font-size: 14px;
}

.active {
    color: red;
}
</style>
